<template>
  <div>
    <el-button @click="cantrolDialog" type="success" icon="el-icon-circle-plus-outline" style='margin-left:30px;margin-top:30px;'>添加</el-button>
    <!-- :data="tableData" -->
    <el-table border :data='records' style="width: 100%;margin:20px 30px">
   
    <el-table-column
        width="80px"
        align="center"
        label="序号"
        type='index'
     >
    </el-table-column>
  
    <el-table-column
        prop="tmName"
        width="width"
        align="center"
        label="品牌名称"
      >
    </el-table-column>
    <el-table-column
        width="width"
        align="center"
        label="品牌logo"
     >
     <!-- 利用插槽解决表格中图片插入 -->
     <!-- 作用域插槽  数据在父组件中 操作数据的结构在父组件中操作
     这里的我们将数据传递给elementUI的el-table子组件,子组件将数据回传(数据回传是在UI内部进行),
     下面是回传接收后处理数据结构
     表格内的插槽直接解构,且接收的属性名必须是row,否则报错,接收到的row
     是数组中的每一项
     	
{ "id": 1, "tmName": "小米", "logoUrl": "http://47.93.148.192:8080/group1/M00/01/71/rBHu8mEQpLiAP5NOAAAFtscZn_s397.png" }
      -->
     <template slot-scope='{row,index}'>
        <img :src="row.logoUrl" style='width:100px'>
     </template>
    </el-table-column>
    <el-table-column
        width="width"
        align="center"
        label="操作"
     >
      <template slot-scope="scope">
       <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- 删除弹窗 
          注意版本,此项目和最新版本差了两个版本,点击确定 的回调是onConfirm 
          最新版本的是confirm
          -->
        <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            :title=" `你确定删除 ${scope.row.tmName} 吗?`"
            @onConfirm="handleDelete(scope.$index, scope.row)"
            >
        <el-button
            slot="reference"
            size="mini"
            type="danger"
           >删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页功能 -->
  <!--  @size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
    <el-pagination
    style="textAlign:center"
    @size-change="handleSizeChange"
    @current-change="getData"
      :current-page="page"
      :page-sizes="[3, 5, 10]" 
      :page-size="limit"
      layout=" prev, pager, next, jumper,->, sizes,total"
      :total="total">
    </el-pagination>
    <!-- 添加产品对话框 -->
    <!-- 时刻注意 elementUI 的标签全是组件  所以此处的sync是为了实现的是
    父组件与子组件的数据同步 -->
    <el-dialog :title="tmForm.id ? '修改品牌' : '添加品牌' "  :visible="dialogFormVisible" >
        <!-- 表单验证 
        :module-'tmForm' 表单数据对象
        :rules='rules' 表单验证规则
        ref='cur' ref放在组件中,拿到组件的vc
        -->
        <el-form :model='tmForm' label-width="80px" :rules='rules' ref='cur' style="width:80%" >
            <el-form-item label="品牌名称"  prop='tmName' >
            <el-input  v-model='tmForm.tmName' autocomplete="off"></el-input>
            </el-form-item>
            <!-- 上传图片 -->
            <el-form-item label="品牌logo" prop='logoUrl'>
             <!--   
                    class="avatar-uploader" 上传器
                    action必选参数，上传的地址
                    show-file-list 是否显示已上传文件列表
                    on-success文件上传成功时的钩子
                    before-upload上传文件之前的钩子，参数为上传的文件，
               -->
                <el-upload
                    class="avatar-uploader"
                    action="/dev-api/admin/product/fileUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <!--  @click="dialogFormVisible = false" -->
            <el-button @click="dialogFormVisible = false" >取 消</el-button>
            <el-button type="primary" @click="confirmAddOrUpdateTrademark" >确 定</el-button>
        </div>
    </el-dialog>
 </div>
</template>

<script>
export default {
    name:'Trademark',
    data(){
        // 自定义路由规则
         var validateName = (rule, value, callback) => {
            if (value.length<2 || value.length>10) {
            callback(new Error('请输入长度在2-10个字符'));
            } else {
            callback();
            }
        };
        return {
            //初始化数据
            page:1,
            limit:3,//每页展示数据条数
            records:[], //表格数据
            total:0,//共多少条数据
            pages:0,//一共多少页
            //dialog弹出框显示与隐藏
            dialogFormVisible:false,
            //上传信息初始化
            tmForm:{
                tmName:'', 
                logoUrl:'',
                id:'',
            },
            // 表单验证规则
            rules:{
                tmName: [
                    { required : true, message : '请输入品牌名称', trigger: 'change' },
                    //表单验证规则
                    // {min: 2,max: 10,message: "长度在 2到 10 个字符",trigger: "change"}
                    //自定义校验规则
                     { validator: validateName, trigger: 'change' }
                ],
                logoUrl: [
                { required: true, message: '请选择合规图片'}
                ],
            }
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        // 获取商品列表方法 
        //传入形参默认值,因为组件一挂载就要获取商品列表信息
       async getData(p=1){
            this.page=p
            let {page,limit}=this
            let result= await this.$API.trademark.reqtrademarkList(page,limit)
            //需要接收成功|失败的信息,如果成功将其保存在
            if(result.code==200){
                //data中已经初始化了数据,将请求到的数据赋值给他们即可
                //表格数据
                this.records=result.data.records
                //分页数据
                this.total=result.data.total
                this.pages=result.data.pages
                this.limit=result.data.size
                this.page=result.data.current
            }
        },
        //分页器   改变每页展示数据条数  需要接收参数  是UI封装的自定义事件
        handleSizeChange(limit){
            this.limit =limit
            //重新发送请求
            this.getData()
        },
        //控制dialog显示
        cantrolDialog(){
            this.dialogFormVisible=true
            // 下次点击添加按钮,上次添加的内容依旧存在,所以在每次点击按钮时,将tmForm清空
            this.tmForm = { tmName: "", logoUrl: "" };
        },
        //文件上传成功时的钩子
        handleAvatarSuccess(res, file, fileList){
            // 图片添加成功将图片赋值给初始化数据
            this.tmForm.logoUrl=res.data
        },
        // 上传文件之前的钩子，参数为上传的文件,上传限制
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
      
        },
        //确定按钮的回调
        confirmAddOrUpdateTrademark(){
            //点击确定按钮后,就要将弹出框隐藏
            this.dialogFormVisible=false;
            this.$refs.cur.validate(async (valid) => {
                if (valid) {
                    // 如果验证成功则发送请求
                    let tmForm=this.tmForm
                        console.log(tmForm);
                        //点击确定按钮后,就是要向服务器添加商品数据,就需要发送请求
                        //请求需要知道成功或者失败的结果,显示提示信息,所以async --await 
                        let result =await this.$API.trademark.AddOrUpdateTrademarkList(tmForm)
                        if(result.code==200){
                            this.$message({
                            showClose:true,
                            message: this.tmForm.id? '恭喜小主修改成功' : '恭喜小主新增了一条信息',
                            type: 'success'
                            });
                            //添加成功后再次向服务器发送请求获取品牌列表信息
                            // 添加完数据之后总页码发生改变,页面跳转到第一页,但是修改之后,页面应该停留在当前页
                            this.getData(this.tmForm? this.page : 1)
                        }else{
                            this.$message.error('呜呜~~ 小主错了哦，这是一条错误消息');
                        }
                } else {
                    return false;
                }
                });
        },
        //修改品牌信息
            handleEdit(index,row){
                this.dialogFormVisible=true;
                // this.tmForm.logoUrl=row.logoUrl
                // this.tmForm.tmName=row.tmName
                // this.tmForm.id=row.id
                // this.tmForm=row;//指针指向问题
                // 浅拷贝
                this.tmForm={...row}
                },
        //删除品牌信息
           async handleDelete(index,row){
                let result = await this.$API.trademark.reqdeleteTrademark(row.id)
                if(result.code==200){
                    this.$message({
                    showClose:true,
                    message: '恭喜小主删除成功',
                    type: 'success'
                    });
                    //删除成功后再次向服务器发送请求获取品牌列表信息
                    this.getData(this.records.length > 1 ? this.page:this.page-1)
                }
            }

        }

    
}
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>